import React, { useState } from "react";

import JavascriptEditor from "./JavascriptEditor"
import JSXEditor from "./JSXEditor"

function App() {
  const [jsonValue, updateJsonValue] = useState(`
option = {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [820, 932, 901, 934, 1290, 1330, 1320],
    type: 'line'
  }]
};

  `);

  const [jsxValue, updateJsxValue] = useState(`
import React from "react"
export default function App(){
  return <div>HelloWorld</div>
}
    `);

  return (
    <div style={{ display: "flex" }}>
      <div style={{ flex: "1 1 0px" }}>
        <JavascriptEditor value={jsonValue} onChange={(value) => updateJsonValue(value)}></JavascriptEditor>
      </div>
      <div style={{ flex: "1 1 0px" }}>
        <JSXEditor value={jsxValue} onChange={(value) => updateJsxValue(value)}></JSXEditor>
      </div>
    </div>
  );
}

export default App;
